<template>
  <el-dialog v-model="visible" :title="dataConfig.modalTitle" width="1200px" @close="handleClose">
    <NibpDetail v-if="dataConfig.id === 'nibp'" :config="dataConfig" :visible="visible" :deviceId="props.deviceId"/>
    <TempDetail v-else-if="dataConfig.id === 'temp'" :config="dataConfig" :visible="visible" :deviceId="props.deviceId"/>
    <LineDetail :config="dataConfig" v-else :visible="visible" :deviceId="props.deviceId"/>
  </el-dialog>
  
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useModal } from '@/hooks/use-modal'
import NibpDetail from './nibp-detail.vue'
import TempDetail from './temp-detail.vue'
import LineDetail from './line-chart.vue'
const props = defineProps({
  deviceId: {
    type: String,
    default: ''
  }
}) as {
  deviceId: string
}
const {
  visible,
  showModal,
  setVisible,
  handleClose
} = useModal()
const dataConfig: Record<string, any> = ref({})
const show = (config: Record<string, any>) => {
  dataConfig.value = config
  showModal()
}
defineExpose({
  show
})
</script>
